<template>
    <div class="analysis">
        <div class="digital">
            <digital-record />
            <digital-record />
        </div>
        <div class="charts">
            <div class="title">
                <el-tooltip placement="left" effect="light">
                    <div slot="content" class="chart-tips">
                        <p><span>Top5 访问来源</span>昨天访问uv占比top5渠道，按由高到低排序；</p>
                        <p><span>日增长Top5来源</span>昨天访问uv增长top5渠道，按由高到低排序；</p>
                    </div>
                    <div class="name">渠道概况 <i class="iconfont iconprompt"></i></div>
                </el-tooltip>
            </div>
            <!-- <div class="title">渠道概况 <i class="iconfont iconprompt"></i></div> -->
            <div id="visit" class="chart"></div>
            <div id="increase" class="chart" ></div>
        </div>
        <div class="traffic">
            <div class="title">访问趋势</div>
            <div class="filter">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </div>
            <div id="line" style="width:1567px; height:629px">
            </div>
        </div>
    </div>
</template>
<script>
import echarts from "echarts"
import digitalRecord from "@/components/advertiseAnalysis/DigitalRecord"
export default{
  data(){
    return{
        options:[{}],
        value:''
    }
  },
  components:{
    digitalRecord
  },
  mounted:function(){
    var myChart = echarts.init(document.getElementById('visit'));
    var myChart2 = echarts.init(document.getElementById('increase'));
    var option = {
        xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
        type: 'value'
        },
        series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        color:'#00D9CD',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
        }]
    };
    myChart.setOption(option);
    myChart2.setOption(option);
    var option1 = {
        title: {
            text: '日增长 Top5 渠道'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210],
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                        offset: 0,
                        color: '#5468FF'
                    }, 
                    {
                        offset: 1,
                        color: 'transparent'
                    }
                    ])
            },
            }
        ]
    };
    var myChart1 = echarts.init(document.getElementById('line'));
    myChart1.setOption(option1);
  }
}
</script>  
<style lang="scss" scoped>
    .analysis{
        overflow: hidden;
    }
    .digital{
        font-size: 0;
        margin:0 -15px;
    }
    .charts{
        margin-top:30px;
        padding:30px;
        background: #fff;
        font-size: 0;
        .title{
            .name{
                display: inline-block;
                font-size: 16px;
                color: #0F1B41;
                line-height: 16px;
                font-weight: bold;
            }
        }
        .iconfont{
            color: #A4ADC8;
            font-size: 14px;
            font-weight: 400;
        }
        .chart{
            display: inline-block;
            width:50%;
            height:406px;
        }
    }
    .traffic{
        margin-top:30px;
        padding:30px;
        background: #fff;
        .title{
            font-weight: 700;
            font-size: 18px;
            color: #0F1B41;
            line-height: 18px;
        }
        .filter{
            margin-top:23px;
            font-size: 0;
            .el-select{
                margin-right:16px;
            }
        }
    }
    .el-tooltip__popper.is-light{
        background: #FFFFFF;
        border: 1px solid #F2F2F2;
        box-shadow: 0 6px 12px 0 rgba(0,0,0,0.08);
    }
    .chart-tips{
        font-size: 14px;
        color: #0F1B41;
        line-height: 14px;
        p{
            margin-bottom:16px;
            &:last-child{
                margin-bottom:0;
            }
            span{
                padding-right:20px;
                font-size: 14px;
                color: #A4ADC8;
            }
        }
    }
</style>  